import { FC } from 'react';
import QuestionCard, { PropsType } from '../../../components/QuestionCard';
import styles from '../common/index.module.scss';
import { useTitle } from 'ahooks';
import { Empty, Typography, Spin } from 'antd';
import ListSearch from '../../../components/ListSearch';
import useLoadQuestionListData from '../../../hooks/useLoadQuestionListData';
import ListPage from '../../../components/ListPage';
const Star: FC = () => {
  useTitle('小慕问卷 - 星标问卷');
  const { Title } = Typography;
  const { loading, data = {} } = useLoadQuestionListData({ isStar: true });
  const { list = [], total = 0 } = data;
  console.log('list', list);
  console.log('total', total);
  return (
    <>
      <div className={styles.header}>
        <div className={styles.left}>
          <Title level={3}>星标问卷</Title>
        </div>
        <div className={styles.right}>
          <ListSearch />
        </div>
      </div>
      <div className={styles.content}>
        {loading && (
          <div style={{ textAlign: 'center' }}>
            <Spin />
          </div>
        )}
        {!loading && list.length === 0 && <Empty description="暂无数据" />}
        {list.length > 0 &&
          list.map((question: PropsType) => {
            const { id } = question;
            return <QuestionCard key={id} {...question} />;
          })}
      </div>
      <div className={styles.footer}>
        <ListPage total={total} />
      </div>
    </>
  );
};
export default Star;
